<template>
  <section>
    <div class="module_top " v-if="type==1">
      <div class="lableName">门禁管理</div>
      <div class="module_top1"></div>
      <!-- <div class="module_top_more">
        <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
        <span>更多</span>
      </div> -->
    </div>
    <div class="module_top" v-else-if="type==2">
      <div class="lableName">安全管控</div>
      <div class="module_top1"></div>
      <!-- <div class="module_top_more">
        <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
        <span>更多</span>
      </div> -->
    </div>
    <div class="module_top" v-else-if="type==3">
      <div class="lableName">停车场</div>
      <div class="module_top1"></div>
      <!-- <div class="module_top_more">
        <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
        <span>更多</span>
      </div> -->
    </div>
    <div class="module_top " v-else-if="type==4">
      <div class="lableName">运维监测</div>
      <div style="display: flex;">
        <div class="module_top1"></div>
        <el-select class="select60div" v-model="echarts4formSearch.dimension" size="mini" @change="dimensionChange4"
          placeholder="请选择">
          <el-option label="日" value="day"></el-option>
          <el-option label="月" value="month"></el-option>
          <el-option label="年" value="year"></el-option>
        </el-select>
      </div>
      <!-- <div class="module_top_more">
        <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
        <span>更多</span>
      </div> -->
    </div>
    <div class="module_top" v-else-if="type==5">
      <div class="lableName">设备统计</div>
      <div class="module_top1"></div>
      <!-- <div class="module_top_more">
        <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
        <span>更多</span>
      </div> -->
    </div>
    <div class="module_top" v-else>
      <div class="lableName">能耗监测</div>
      <div class="module_top1"></div>
      <div>
        <el-select class="select60div" v-model="echarts6formSearch.dimension" size="mini" @change="dimensionChange6"
          placeholder="请选择">
          <el-option label="日" value="day"></el-option>
          <el-option label="月" value="month"></el-option>
          <el-option label="年" value="year"></el-option>
        </el-select>
      </div>
      <!-- <div class="module_top_more">
        <img class="demo_more_img" src="../../assets/img/demo_more.png" alt="">
        <span>更多</span>
      </div> -->
    </div>
    <demoZhongshanItemMod></demoZhongshanItemMod>
    <!-- 门禁统计 -->
    <div v-if="type==1">
      <div class="infor_module">
        <!-- <div class="infor_module_item color13b1ba">
          <img class="zs_icon" src="../../assets/img/zs_icon2.png" alt="">
          <span class="infor_module_item_name">用户总数</span>
          <span class="colorWhite">987</span>
        </div> -->

        <div class="infor_module_item">
          <img class="zs_icon" src="../../assets/img/zs_icon3.png" alt="">
          <span class="infor_module_item_name">进出如总数</span>
          <span class="colorWhite">368</span>

        </div>
        <div>
          <el-select class="select60div" v-model="echarts1formSearch.dimension" size="mini" @change="dimensionChange"
            placeholder="请选择">
            <el-option label="日" value="day"></el-option>
            <el-option label="月" value="month"></el-option>
            <el-option label="年" value="year"></el-option>
          </el-select>
        </div>

      </div>
      <!-- <div class="infor_module">
        <div class="infor_module_item">
          <img class="zs_icon" src="../../assets/img/zs_icon4.png" alt="">
          <span class="infor_module_item_name">学生数</span>
          <span class="colorWhite">278</span>
        </div>
        <div class="infor_module_item">
          <img class="zs_icon" src="../../assets/img/zs_icon4.png" alt="">
          <span class="infor_module_item_name">访客数</span>
          <span class="colorWhite">331</span>
        </div>
      </div> -->
      <div class="echarts_box_echarts">
        <div class="echarts_box1_left">
          <!-- <div class="echarts_box1_item" v-for="item in option1Color" :key="item.color">
            <span>{{item.text}}</span>
            <span class="echarts_box1_color" :style="{background:item.color}"></span>
          </div> -->
        </div>
        <div class="echarts_box echarts_box1" id="echarts1"></div>
      </div>
    </div>
    <!-- 安全管理 -->
    <div v-if="type==2">
      <div class="infor_module">
        <div class="infor_module_item color13b1ba">
          <img class="zs_icon" src="../../assets/img/zs_icon2.png" alt="">
          <span class="infor_module_item_name">月报警数</span>
          <span class="colorWhite">987</span>
        </div>

      </div>
      <div class="echarts_box2">
        <div class="infor_module_item infor_module_item2">
          <img class="zs_icon" src="../../assets/img/zs_icon1.png" alt="">
          <span class="infor_module_item_name">办公区1栋102烟感探测器发出警报...</span>
        </div>
        <div class="infor_module_item infor_module_item2">
          <img class="zs_icon" src="../../assets/img/zs_icon1.png" alt="">
          <span class="infor_module_item_name">办公区1栋102烟感探测器发出警报...</span>
        </div>
        <div class="infor_module_item infor_module_item2">
          <img class="zs_icon" src="../../assets/img/zs_icon1.png" alt="">
          <span class="infor_module_item_name">办公区1栋102烟感探测器发出警报...</span>
        </div>
        <div class="infor_module_item infor_module_item2">
          <img class="zs_icon" src="../../assets/img/zs_icon1.png" alt="">
          <span class="infor_module_item_name">办公区1栋102烟感探测器发出警报...</span>
        </div>
      </div>
      <!-- <div class="echarts_box_echarts"> -->
      <!-- <div class="echarts_box echarts_box2" id="echarts2"></div>
        <div> -->
      <!-- <div class="echarts_box2_item" v-for="item in option2Color" :key="item.color">
            <span class="echarts_box2_color" :style="{background:item.color}"></span>
            <span>{{item.text}}</span>
          </div> -->
      <!-- </div> -->
    </div>
    </div>
    <!-- 停车场 -->
    <div v-if="type==3">
      <div class="infor_module">
        <div class="infor_module_tcc_k">
          <div>{{inCount}}</div>
          <div>入场次数</div>
        </div>
        <div class="infor_module_tcc_c">
          <div>{{outCount}}</div>
          <div>出场次数</div>
        </div>
        <div class="infor_module_tcc">
          <div>{{total}}</div>
          <div>总进出次数</div>
        </div>
        <div>
          <el-select style="margin-right: 20px;" class="select60div" v-model="echarts3formSearch.dimension" size="mini"
            @change="dimensionChange3" placeholder="请选择">
            <el-option label="日" value="day"></el-option>
            <el-option label="月" value="month"></el-option>
            <el-option label="年" value="year"></el-option>
          </el-select>
        </div>
      </div>
      <div class="echarts_box echarts_box3" id="echarts3"></div>
    </div>
    <!-- 运维监测 -->
    <div v-if="type==4">

      <div class="echarts_box echarts_box6" id="echarts4"></div>
    </div>
    <!-- 运营数据 -->
    <div v-if="type==5">
      <div class="echarts_box echarts_box6" id="echarts5"></div>
    </div>
    <!-- 能耗监测 -->
    <div v-if="type==6">
      <div class="echarts_box echarts_box6" id="echarts6"></div>
    </div>
  </section>
</template>

<script>
  import * as echarts from 'echarts'
  import { statisticentranceGuard, statisticentparkingLot, statisticentoperation, statisticentenergy } from '../../url/api';
  import { getDynamicDate } from '../../util/util';

  import demoZhongshanItemMod from './demo_zhongshan_item_mod'
  export default {
    props: ['type'],
    data() {
      // let xData = []
      let yData = []
      let option3Data = [
        {
          value: 49,
          itemStyle: {
            color: '#4b90ff'
          }
        },
        {
          value: 200,
          itemStyle: {
            color: '#ff9f64'
          }
        },
        {
          value: 24,
          itemStyle: {
            color: '#a85fff'
          }
        },
        {
          value: 90,
          itemStyle: {
            color: '#ffda68'
          }
        },
        {
          value: 80,
          itemStyle: {
            color: '#ffda68'
          }
        },
        {
          value: 40,
          itemStyle: {
            color: '#06FFD9'
          }
        },
        {
          value: 45,
          itemStyle: {
            color: '#ff9671'
          }
        },
      ]
      let option4Data = [240, 760, 720, 80, 790, 150, 300]
      let option5Data = [
        {
          value: 52,
          itemStyle: {
            color: '#06FFD9'
          }
        },
        {
          value: 100,
          itemStyle: {
            color: '#06FFD9'
          }
        },
        {
          value: 85,
          itemStyle: {
            color: '#06FFD9'
          }
        },
        {
          value: 28,
          itemStyle: {
            color: '#06FFD9'
          }
        },
        {
          value: 18,
          itemStyle: {
            color: '#06FFD9'
          }
        },
        {
          value: 48,
          itemStyle: {
            color: '#06FFD9'
          }
        },
        {
          value: 89,
          itemStyle: {
            color: '#06FFD9'
          }
        },
      ]

      return {
        total:0,
        inCount:0,
        outCount:0,
        // xData : [],
        // yData : [],
        echarts1formSearch: {
          dimension: 'day'
        },
        echarts3formSearch: {
          dimension: 'day'
        },
        echarts4formSearch: {
          dimension: 'day'
        },
        echarts5formSearch: {
          dimension: 'day'
        },
        echarts6formSearch: {
          dimension: 'day'
        },
        option1Color: [
          {
            color: '#00ffba',
            text: '访客'
          },
          {
            color: '#02edfc',
            text: '学生'
          },
          {
            color: '#00a2ff',
            text: '员工'
          },
        ],
        option2Color: [
          {
            color: '#00ce96',
            text: '紧急求助按钮'
          },
          {
            color: '#d296ce',
            text: '烟感探测器'
          },
          {
            color: '#ff5476',
            text: '吸顶式热感探测器'
          },
          {
            color: '#4dbaff',
            text: '监控异常行为分析'
          },
        ],
        option1: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
          },
          xAxis: {
            type: 'category',
            // boundaryGap: false, // 坐标轴两边留白
            axisLabel: {
              color: '#ddd',
              fontSize: this.transformFontSize(12),
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'transparent',
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: '#15676a'
              }
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: [{
            name: "数量",
            nameTextStyle: {
              fontSize: this.transformFontSize(12),
              color: "#ddd"
            },
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'transparent',
              }
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: '#ddd',
              fontSize: this.transformFontSize(12),
              formatter: '{value}'
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: '#15676a'
              }
            },
          }],
          grid: {
            left: '0%',
            right: '5%',
            bottom: '0%',
            top: '20%',
            containLabel: true,
            show: false // 网格边框是否显示，上和右边框 
          },
          series: [{
            data: yData,
            areaStyle: {
              color: '#0e9cff',
              opacity: this.transformFontSize(0.2)
            },
            symbolSize: this.transformFontSize(8),
            type: 'bar',
            color: "#0e9cff",
            barWidth: "30%",
          }]
          
        },
        option2: {
          legend: {
            align: 'left',
            orient: 'vertical',
            left: 'right',
            top: '18%',
            itemHeight: this.transformFontSize(12),
            itemWidth: this.transformFontSize(12),
            itemGap: this.transformFontSize(16),
            textStyle: {
              color: '#fff',
              fontSize: this.transformFontSize(12)
            }
          },
          tooltip: {
            trigger: 'item'
          },
          color: ['#00ce96', '#ff5476', '#4dbaff', '#d296ce'],
          series: [
            {
              name: '访问来源',
              type: 'pie',
              // selectedMode: '',
              radius: ['60%', '75%'],
              center: ['30%', '55%'],
              label: {
                // position: 'top',
                fontSize: this.transformFontSize(12),
                formatter: '{d}%',
                color: '#ddd',

              },
              labelLine: {
                // position:'top',
                length: this.transformFontSize(5),
                length2: 0,
                show: false,
              },
              data: [
                { value: 240, name: '紧急求助按钮', },
                { value: 260, name: '烟感探测器' },
                { value: 250, name: '吸顶式热感探测器' },
                { value: 250, name: '监控异常行为分析' },
              ],
            },

          ],
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '0%',
            // containLabel: true,
            // show: false // 网格边框是否显示，上和右边框 
          },
        },
        option3: {
          grid: {
            top: "10%",
            left: "0%",
            right: "0%",
            bottom: "0%",
            containLabel: true
          },
          color: ["#0084ff", "#ffa600"],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#00ff9d'
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                color: '#ddd',
                fontSize: this.transformFontSize(12),
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'transparent',
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: '#15676a'
                }
              },
              data: ['2022-03', '2022-04', '2022-05', '2023-06', '2022-07', '2022-08', '2022-09'],
              // axisPointer: {
              //   type: 'shadow'
              // }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '车次',
              axisLabel: {
                textStyle:{
                  color: '#fff',
                 fontSize: this.transformFontSize(12)
                },
                formatter: '{value}'//ml
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: '#15676a'
                }
              },
            }
          ],
          series: [
            {
              name: '入场次数',
              type: 'bar',
              barGap: '0',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 次';
                }
              },
              data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
              ]
            },
            {
              name: '出场次数',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 次';
                }
              },
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6
              ]
            }
          ]
        },
        
        option4: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
          },
          legend:{
            color: ["#0084ff", "#ffa600"],
            data:['运维','巡查'],
            textStyle:{
              color:"#fff"
            }
          },
          
          xAxis: {
            type: 'category',
            boundaryGap: false, // 坐标轴两边留白
            axisLabel: {
              color: '#ddd',
              fontSize: this.transformFontSize(12),
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'transparent',
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: '#15676a'
              }
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: [{
            name: "次数",
            nameTextStyle: {
              fontSize: this.transformFontSize(12),
              color: "#ddd"
            },
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'transparent',
              }
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: '#ddd',
              fontSize: this.transformFontSize(12),
              formatter: '{value}'
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: '#15676a'
              }
            },
          }],
          grid: {
            left: '5%',
            right: '5%',
            bottom: '0%',
            top: '20%',
            containLabel: true,
            show: false // 网格边框是否显示，上和右边框 
          },
          series: [{
            name: '运维',
            data: option4Data,
            areaStyle: {
              color: '#0e9cff',
              opacity: this.transformFontSize(0.2)
            },
            symbolSize: this.transformFontSize(8),
            type: 'line',
            color: "#0e9cff",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#00eeff'
                }
              }
            },
            smooth: true
          },{
            name: '巡查',
            data: option4Data,
            areaStyle: {
              color: '#ffa600',
              opacity: this.transformFontSize(0.2)
            },
            symbolSize: this.transformFontSize(8),
            type: 'line',
            color: "#ffa600",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#00eeff'
                }
              }
            },
            smooth: true
          },]
        },
        option5: {
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'pie',
              radius: '80%',
              barWidth: this.transformFontSize(12),
              data: [
                { value: 1048, name: '暖通空调' },
                { value: 735, name: '视频监控' },
                { value: 580, name: '门禁' },
                { value: 484, name: '消防报警' },
                { value: 300, name: '入侵报警' }
              ],
              label: {
                color: '#fff',
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 0,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 1)'
                },
              }
              

            },
          ],
          
        },
        option6: {
          tooltip: {},
          // legend: {
          //   align: 'left',
          //   // orient: 'vertical',
          //   top: 'top',
          //   top: '0',
          //   itemHeight: this.transformFontSize(12),
          //   itemWidth: this.transformFontSize(12),
          //   itemGap: this.transformFontSize(16),
          //   textStyle: {
          //     color: '#fff',
          //     fontSize: this.transformFontSize(12)
          //   }
          // },
          legend:{
            color: ["#0084ff", "#ffa600"],
            data:['电量','水量'],
            textStyle:{
              color:"#fff"
            }
          },
          tooltip: {
            trigger: 'item'
          },
          color: ['#02edfc', '#70bdff'],
          // dataset: {
          //   source: [
          //     ['product', '电量', '水量', '气量'],
          //     ['第一季度', 190, 480, 330],
          //     ['第二季度', 150, 190, 195],
          //     ['第三季度', 480, 210, 230],
          //     ['第四季度', 482, 220, 220]
          //   ]
          // },
          xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            boundaryGap: true, // 坐标轴两边留白
            axisLabel: {
              color: '#ddd',
              fontSize: this.transformFontSize(12),
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'transparent',
              }
            },
          },
          yAxis: {
            axisLabel: {
              color: '#ddd',
              fontSize: this.transformFontSize(12),
              formatter: '{value}'
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: '#15676a'
              }
            },
          },
          series: [
            {
              type: 'bar',
              data: option4Data,
              barWidth: this.transformFontSize(12),
              itemStyle: {
                normal: {
                  barBorderRadius: [10, 10, 10, 10],
                  // color: ['#02edfc']
                }
              }

            },
            {
              type: 'bar',
              data: option4Data,
              barWidth: this.transformFontSize(12),
              itemStyle: {
                normal: {
                  barBorderRadius: [5, 5, 5, 5],
                  // color: ['#0074d7']
                }
              }

            },
            // {
            //   type: 'bar',
            //   data: option4Data,
            //   barWidth: this.transformFontSize(12),
            //   itemStyle: {
            //     normal: {
            //       barBorderRadius: [5, 5, 5, 5],
            //       // color: ['#00d8b2']
            //     }
            //   }

            // },
          ],
          grid: {
            left: '0%',
            right: '1%',
            bottom: '0',
            top: '10%',
            containLabel: true,
            show: false // 网格边框是否显示，上和右边框 
          },
        }

      }
    },
    methods: {
      transformFontSize(fontsize) {
        // 获取屏幕宽度
        const width = document.documentElement.clientWidth;
        const ratio = width / 1920
        // console.log(fontsize * ratio,"AAAAAAAAAAAAAAAAAAAQQQQQQQQ");
        // 取下整
        return parseInt(fontsize * ratio)
      },
      dimensionChange6() {
        let myChart = echarts.init(document.getElementById('echarts6'))
        let params = {
          dimension: this.echarts6formSearch.dimension
        }
        let dateArry = getDynamicDate(this.echarts6formSearch.dimension);
        if (this.echarts6formSearch.dimension == "day") {
          console.log(dateArry);
          params.startDay = dateArry[0];
          params.endDay = dateArry[1];
        } else if (this.echarts6formSearch.dimension == "month") {
          params.startMonth = dateArry[0];
          params.endMonth = dateArry[1];
        } else if (this.echarts6formSearch.dimension == "year") {
          params.startYear = dateArry[0];
          params.endYear = dateArry[1];
        }
        debugger
        statisticentenergy(params).then(res => {
          console.log(res);
          if (res.data.ok) {
            let xData = []
            let yData1 = []
            let yData2 = []
            // let data = []
            res.data.data.filter((item) => {
              xData.push(item.x)
              yData1.push(item.yfloat[0])
              yData2.push(item.yfloat[1])
            });
            this.option6.xAxis.data = xData
            this.option6.series[0].data = yData1
            this.option6.series[1].data = yData2
            myChart.setOption(this.option6);

          } else {
            this.$message(res.data.message);
          }
        })
      },
      dimensionChange4() {
        let myChart = echarts.init(document.getElementById('echarts4'))
        let params = {
          dimension: this.echarts4formSearch.dimension
        }
        let dateArry = getDynamicDate(this.echarts4formSearch.dimension);
        if (this.echarts4formSearch.dimension == "day") {
          console.log(dateArry);
          params.startDay = dateArry[0];
          params.endDay = dateArry[1];
        } else if (this.echarts4formSearch.dimension == "month") {
          params.startMonth = dateArry[0];
          params.endMonth = dateArry[1];
        } else if (this.echarts4formSearch.dimension == "year") {
          params.startYear = dateArry[0];
          params.endYear = dateArry[1];
        }
        statisticentoperation(params).then(res => {
          console.log(res);
          if (res.data.ok) {
            let xData = []
            let yData1 = []
            let yData2 = []
            // let data = []
            res.data.data.data.filter((item) => {
              xData.push(item.x)
              yData1.push(item.yint[0])
              yData2.push(item.yint[1])
            });
            this.option4.xAxis.data = xData
            this.option4.series[0].data = yData1
            this.option4.series[1].data = yData2
            myChart.setOption(this.option4);

          } else {
            this.$message(res.data.message);
          }
        })
      },
      dimensionChange3() {
        let myChart = echarts.init(document.getElementById('echarts3'))
        let params = {
          dimension: this.echarts3formSearch.dimension
        }
        let dateArry = getDynamicDate(this.echarts3formSearch.dimension);
        if (this.echarts3formSearch.dimension == "day") {
          console.log(dateArry);
          params.startDay = dateArry[0];
          params.endDay = dateArry[1];
        } else if (this.echarts3formSearch.dimension == "month") {
          params.startMonth = dateArry[0];
          params.endMonth = dateArry[1];
        } else if (this.echarts3formSearch.dimension == "year") {
          params.startYear = dateArry[0];
          params.endYear = dateArry[1];
        }
        
        statisticentparkingLot(params).then(res => {
          console.log(res);
          if (res.data.ok) {
            let xData = []
            let yData1 = []
            let yData2 = []
            // let data = []
            res.data.data.data.filter((item) => {
              xData.push(item.x)
              yData1.push(item.yint[0])
              yData2.push(item.yint[1])
            });
            this.total = res.data.data.summary.total;
            this.inCount = res.data.data.summary.inCount;
            this.outCount = res.data.data.summary.outCount;

            this.option3.xAxis[0].data = xData
            this.option3.series[0].data = yData1
            this.option3.series[1].data = yData2
            // 
            myChart.setOption(this.option3);
            // 
          } else {
            this.$message(res.data.message);
          }
        })
      },
      dimensionChange() {
        let myChart = echarts.init(document.getElementById('echarts1'))
        let params = {
          dimension: this.echarts1formSearch.dimension
        }
        let dateArry = getDynamicDate(this.echarts1formSearch.dimension);
        if (this.echarts1formSearch.dimension == "day") {
          console.log(dateArry);
          params.startDay = dateArry[0];
          params.endDay = dateArry[1];
        } else if (this.echarts1formSearch.dimension == "month") {
          params.startMonth = dateArry[0];
          params.endMonth = dateArry[1];
        } else if (this.echarts1formSearch.dimension == "year") {
          params.startYear = dateArry[0];
          params.endYear = dateArry[1];
        }
        // 
        statisticentranceGuard(params).then(res => {
          console.log(res);
          if (res.data.ok) {
            let xData = []
            let yData = []
            // let data = []
            res.data.data.data.filter((item) => {
              xData.push(item.x)
              yData.push(item.y)
            });
            this.option1.xAxis.data = xData
            this.option1.series[0].data = yData
            console.log(this.option1.xAxis.data, this.option1.series.data);
            // this.xData = xData
            // this.yData = yData
            // 
            myChart.setOption(this.option1);
            // 
          } else {
            this.$message(res.data.message);
          }
        })
      },
      drawEcharts1() {
        this.dimensionChange()
      },
      drawEcharts2() {
        let myChart = echarts.init(document.getElementById('echarts2'))
        myChart.setOption(this.option2);
      },
      drawEcharts3() {
        // let myChart = echarts.init(document.getElementById('echarts3'))
        // myChart.setOption(this.option3);
        this.dimensionChange3()
      },
      drawEcharts4() {
        // let myChart = echarts.init(document.getElementById('echarts4'))
        // myChart.setOption(this.option4);
        this.dimensionChange4()
      },
      drawEcharts5() {
        let myChart = echarts.init(document.getElementById('echarts5'))
        myChart.setOption(this.option5);
      },
      drawEcharts6() {
        // let myChart = echarts.init(document.getElementById('echarts6'))
        // myChart.setOption(this.option6);
        this.dimensionChange6()
      },
      init() {
        if (this.type == 1) {
          this.drawEcharts1()
        } else if (this.type == 3) {
          this.drawEcharts3()
        } else if (this.type == 4) {
          this.drawEcharts4()
        } else if (this.type == 5) {
          this.drawEcharts5()
        } else if (this.type == 6) {
          this.drawEcharts6()
        }
        // this.drawEcharts2()

        // this.drawEcharts4()
        // this.drawEcharts5()
        // this.drawEcharts6()
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      })

    },
    components: {
      demoZhongshanItemMod
    }
  }
</script>

<style scoped>
  .echarts_box1_left {
    /* text-align: right;
    margin-top: 20px;
    margin-left: 54px; */
  }

  .echarts_box1_item {
    color: #fff;
    margin-top: 20px;
  }

  .echarts_box2_item {
    margin-top: 20px;
  }

  .echarts_box1_item:first-child {
    margin-top: 10px;
  }

  .echarts_box2_item:first-child {
    margin-top: 10px;
  }

  .echarts_box_echarts {
    display: flex;
  }

  .echarts_box1_color {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-left: 6px;
  }

  .echarts_box2_color {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 6px;
  }

  .echarts_box {
    width: 100%;
    height: 160px;
  }

  .echarts_box1 {
    width: 100%;
    height: 145px;
    /* margin-left: 28px; */
  }

  .echarts_box3 {
    height: 140px;
  }

  .echarts_box2 {
    width: 100%;
    height: 150px;
    /* margin-right: 28px; */
  }

  .echarts_box6 {
    width: 100%;
    height: 200px;
  }

  .infor_module_tcc {
    text-align: center;
    color: #17f8fd;
    font-size: 12px;
  }

  .infor_module_tcc_k {
    text-align: center;
    color: #0084ff;
    font-size: 12px;
  }
  .infor_module_tcc_c {
    text-align: center;
    color: #ffa600;
    font-size: 12px;
  }
  
  .infor_module_tcc_c div:first-child {
    font-size: 20px;
    line-height: 100%;
  }
  .infor_module_tcc_k div:first-child {
    font-size: 20px;
    line-height: 100%;
  }

  .infor_module_tcc div:first-child {
    font-size: 20px;
    line-height: 100%;
  }

  .zs_icon {
    width: 15px;
  }

  .infor_module {
    display: flex;
    justify-content: space-between;
  }

  .infor_module {
    margin-bottom: 5px;
  }

  .infor_module_item {
    height: 30px;
    width: 200px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: #17f8fd;
    font-size: 12px;
    box-sizing: border-box;
    padding: 0px 8px 0 8px;
    /* padding-top:7px; */
    background: rgba(23, 248, 253, 0.2);
  }

  .infor_module_item2 {
    width: 360px;
    margin-bottom: 10px;
  }

  .infor_module_item_name {
    margin-left: 5px;
    margin-right: 8px;
  }

  .colorWhite {
    color: #fff;
  }

  .lableName {
    /* width: 120px; */
    margin-right: 10px;
    color: #01FFD8;
    font-size: 19px;
    font-weight: 600;
    font-style: italic;
  }

  .module_top {

    height: 55px;
    display: flex;
    align-items: center;
    margin-top: 5px;
  }

  .module_top1 {
    height: 18px;
    background: url("../../assets/img/dianzhui.png") no-repeat;
    background-size: 200px 18px;
    width: 200px;
    /* position: absolute; */
    margin-top: 4px;
  }

  .module_top_more {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    cursor: pointer;
    line-height: 100%;
    color: #00f9ff;
  }

  .demo_more_img {
    height: 10px;
    font-size: 14px;
    margin-left: 5px;
  }

  .color13b1ba {
    background: #13b1ba;
    color: #fff;
  }

  .select60div {
    width: 60px;
  }

  .select60div>>>.el-input__inner {
    background-color: #00fbff18;
    color: #fff;
  }
</style>